没事儿玩些小操作还是蛮开心的,毕竟闲下来人就有点慌,真是搬砖的命,难怪没女朋友搬砖就能很开心了。
项目第一阶段快告一段落了,然后就做起二期的准备了,功能变动应该不会太大还是table、search、header、detail。持续写功能不多的页面话就有点无聊了,那就玩点花哨的吧,不把自己玩死就好了,搞个根据配置创建页面的组件的功能吧!
table基类
页面玩出花还是要走这几步:
1.根据初始参数请求list数据
2.搜索完善请求参数(更新请求参数),再请求list数据
3.翻页(更新页码部分请求参数),再请求list数据
4.读取本地缓存数据如果有数据就手动操作请求。
噪点操作
导出、新增.......
关于this的小操作在这些噪点操作里面,首先这些操作有的页面有有的没有。一般写react操作这些操作都包含一个操作函数或组合操作。
class test extends Component {
constructor(props) {
super(props);
this.func = this.func.bind(this)
}
// 省去千万条代码
................
}
所以自己想这些不确定的操作能不能由外部传入,但是外部传入的函数放到内部能不能访问到this这是一个问题,并且初始执行constructor实例化的时候能不能挂到对象属性上这是一个问题。看经常在constructor中写的this绑定的方式其实大概的意思就是在this上创建一个属性指向一个函数然后调用bind修改运行时this指向。所以就写了一个上面的扩充事件的方法,做了类似于constructor里面写绑定的功能。
然后操作事件的在视图上面的显示放到renderSearch里面作为参数,做到不管视图上要添加什么功能都能访问到新增的事件并且绑定时不会出现this为空的情况。
更新流程优化
之前里面写了一个state更新操作的方法,还挺好的但是用的时候看之前的代码是放到componentWillUpdate里的。然而,我们用的是16之后的版本所以这个很可能就要被抛弃了。所以自己做了个优化,改用了最新的生命周期函数。但是这个是一个静态方法并不属于实例,所以很多this操作没办法做。
这里优化的一个又和上面的槽点操作有关,首先之前写的这个更新state的方法是用来处理重复更新的操作的,所以list请求这个更新流程是所有地方都有的,但是如果做更新或者提交之类的操作不管需要新建操作函数,相应的也要在更新流程里面添加操作。这个地方也就想从里面拨出一些到外面,于是写了一个用来执行更新流程的函数。当然目前是这么个想法,然后写了,但是总感觉实现上还是不太好功能函数还有优化的地方。
具体上的想法大概是,在更新时候的执行回调函数里加入一个外部传入的函数打断一下内部的更新过程,做到能从外部参与更新的效果,参照了一下后端老哥写的面向切面编程的思路。如果有多个更新流程需要执行,等到更新执行完之后再返回更新完的统一state数据。
感觉关于this这一点算是吃透一大半了,不过还是有些点不很确定。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。